import React from 'react';
import cls from 'classnames';
import { DesignerHeader } from './DesignerHeader';
import { DesignerContent } from './DesignerContent';
import { DesignerContext, useEngine } from './DesignerHooks';
import './styles.less';
import { DesignerAPI } from './type';

export const ProcessDesigner: React.FC<DesignerAPI.IDesignerProps> = ({
  id,
  nodeList,
}) => {
  const clsName = 'design';

  const { engine } = useEngine(id);

  return (
    <DesignerContext.Provider value={engine}>
      <div className={cls(`${clsName}-layout`)}>
        <div className={cls(`${clsName}-header`)}>
          <DesignerHeader />
        </div>
        <div className={cls(`${clsName}-content`)}>
          <DesignerContent nodeList={nodeList} />
        </div>
      </div>
    </DesignerContext.Provider>
  );
};
